{% extends 'base.html' %}

{% block title %}
    {% if user_obj %}编辑用户{% else %}新增用户{% endif %} - 固定资产管理系统
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
                <li class="breadcrumb-item"><a href="{% url 'assets:user_list' %}">用户管理</a></li>
                <li class="breadcrumb-item active" aria-current="page">
                    {% if user_obj %}编辑用户{% else %}新增用户{% endif %}
                </li>
            </ol>
        </nav>
        
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2>
                <i class="fas fa-{% if user_obj %}edit{% else %}plus{% endif %} me-2"></i>
                {% if user_obj %}编辑用户{% else %}新增用户{% endif %}
            </h2>
            <a href="{% url 'assets:user_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回列表
            </a>
        </div>
        
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-user me-2"></i>用户信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <form method="post">
                            {% csrf_token %}
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="username" class="form-label">
                                        用户名 <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" class="form-control" id="username" name="username" 
                                           value="{% if user_obj %}{{ user_obj.username }}{% else %}{{ form_data.username|default:'' }}{% endif %}"
                                           {% if user_obj %}readonly{% endif %} required>
                                    {% if not user_obj %}
                                        <div class="form-text">用户名只能包含字母、数字和下划线</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6">
                                    <label for="email" class="form-label">邮箱</label>
                                    <input type="email" class="form-control" id="email" name="email" 
                                           value="{% if user_obj %}{{ user_obj.email|default:'' }}{% else %}{{ form_data.email|default:'' }}{% endif %}">
                                </div>
                            </div>
                            
                            {% if not user_obj %}
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="password" class="form-label">
                                        密码 <span class="text-danger">*</span>
                                    </label>
                                    <input type="password" class="form-control" id="password" name="password" required>
                                    <div class="form-text">密码长度不能少于6位</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="password_confirm" class="form-label">
                                        确认密码 <span class="text-danger">*</span>
                                    </label>
                                    <input type="password" class="form-control" id="password_confirm" name="password_confirm" required>
                                </div>
                            </div>
                            {% endif %}
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="first_name" class="form-label">名</label>
                                    <input type="text" class="form-control" id="first_name" name="first_name" 
                                           value="{% if user_obj %}{{ user_obj.first_name|default:'' }}{% else %}{{ form_data.first_name|default:'' }}{% endif %}">
                                </div>
                                <div class="col-md-6">
                                    <label for="last_name" class="form-label">姓</label>
                                    <input type="text" class="form-control" id="last_name" name="last_name" 
                                           value="{% if user_obj %}{{ user_obj.last_name|default:'' }}{% else %}{{ form_data.last_name|default:'' }}{% endif %}">
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">权限设置</label>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="is_active" name="is_active" 
                                                       {% if user_obj %}{% if user_obj.is_active %}checked{% endif %}{% else %}{% if form_data.is_active != 'off' %}checked{% endif %}{% endif %}>
                                                <label class="form-check-label" for="is_active">
                                                    <i class="fas fa-check-circle me-1 text-success"></i>激活用户
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="is_staff" name="is_staff" 
                                                       {% if user_obj %}{% if user_obj.is_staff %}checked{% endif %}{% else %}{% if form_data.is_staff == 'on' %}checked{% endif %}{% endif %}>
                                                <label class="form-check-label" for="is_staff">
                                                    <i class="fas fa-user-tie me-1 text-info"></i>员工权限
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="is_superuser" name="is_superuser" 
                                                       {% if user_obj %}{% if user_obj.is_superuser %}checked{% endif %}{% else %}{% if form_data.is_superuser == 'on' %}checked{% endif %}{% endif %}>
                                                <label class="form-check-label" for="is_superuser">
                                                    <i class="fas fa-crown me-1 text-danger"></i>超级用户
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">用户组</label>
                                <div class="row">
                                    {% for group in groups %}
                                    <div class="col-md-4 mb-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="group_{{ group.id }}" name="groups" value="{{ group.id }}"
                                                   {% if user_obj %}{% if group in user_obj.groups.all %}checked{% endif %}{% endif %}>
                                            <label class="form-check-label" for="group_{{ group.id }}">
                                                <i class="fas fa-users me-1 text-muted"></i>{{ group.name }}
                                            </label>
                                        </div>
                                    </div>
                                    {% empty %}
                                    <div class="col-12">
                                        <p class="text-muted">暂无用户组</p>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-end">
                                <a href="{% url 'assets:user_list' %}" class="btn btn-secondary me-2">取消</a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i>
                                    {% if user_obj %}更新用户{% else %}创建用户{% endif %}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                {% if user_obj %}
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>用户统计
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-6">
                                <div class="border-end">
                                    <h4 class="text-primary">{{ user_obj.date_joined|date:"Y-m-d" }}</h4>
                                    <small class="text-muted">注册日期</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <h4 class="text-success">
                                    {% if user_obj.last_login %}
                                        {{ user_obj.last_login|date:"Y-m-d" }}
                                    {% else %}
                                        从未登录
                                    {% endif %}
                                </h4>
                                <small class="text-muted">最后登录</small>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-lightbulb me-2"></i>提示信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                <strong>激活用户</strong>：用户可以登录系统
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-user-tie text-info me-2"></i>
                                <strong>员工权限</strong>：可以访问管理后台
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-crown text-danger me-2"></i>
                                <strong>超级用户</strong>：拥有所有权限
                            </li>
                            <li>
                                <i class="fas fa-users text-muted me-2"></i>
                                <strong>用户组</strong>：批量分配权限
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 密码确认验证
document.addEventListener('DOMContentLoaded', function() {
    const password = document.getElementById('password');
    const passwordConfirm = document.getElementById('password_confirm');
    
    if (password && passwordConfirm) {
        function validatePassword() {
            if (password.value !== passwordConfirm.value) {
                passwordConfirm.setCustomValidity('两次输入的密码不一致');
            } else {
                passwordConfirm.setCustomValidity('');
            }
        }
        
        password.addEventListener('input', validatePassword);
        passwordConfirm.addEventListener('input', validatePassword);
    }
});
</script>
{% endblock %}